<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			.content{
				width: 520px;
				height: 280px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
			}
			.ul{
				width: 9999px;
			}
			.ul::after{
				content: "";
				clear: both;
			}
			.ul li{
				float: left;
				width: 520px;
				height: 280px;
			}
			.ul li img{
				width: 100%;
			}
			.next,.last{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				font-size: 20px;
				background: #000000;
				color: white;
				opacity: 0.3;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				text-align: center;
				line-height: 30px;
				cursor:pointer;	
			}
			.next{
				right:10px;
			}
			.next:hover{
				opacity:0.6;
			}
			.last{
				left:10px;
			}
			.last:hover{
				opacity:0.6;
			}
			.ran{
				transition:500ms;	
			}
			.pager{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10px;
			}
			.pager span{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: white;
				margin: 0 7px;
			}
			.pager .active{
				background: skyblue;
			}
			
		</style>
	</head>
	<body>
		<div class="content">
			<ul class="ul ">
				<li><img src="img/11.jpg"/></li>
				<li><img src="img/22.jpg"/></li>
				<li><img src="img/33.jpg"/></li>
			</ul>
			<div class="next">&gt;</div>
			<div class="last">&lt;</div>
			<div class="pager"></div>
		</div>
		<script type="text/javascript">
			var content = document.querySelector(".content")
			var ul = content.querySelector(".ul")
			var ali = ul.querySelectorAll("li")
			var next = document.querySelector(".next")
			var last = document.querySelector(".last")
			var imgW = ali[0].offsetWidth

		
			//图片列表前后添加最后和第一张图片
			var cloneLiFirst = ali[0].cloneNode(true)
			var cloneLiEnd = ali[ali.length-1].cloneNode(true)
			//在图片列表后面添加第一张图
			ul.appendChild(cloneLiFirst)
			//在图片列表前面添加最后一张图
			ul.insertBefore(cloneLiEnd,ali[0])
			
			
			var index = 1
			ul.style.transform = "translateX(-"+ imgW*index+"px)"
		
			var isClick = true
		
		//右  下一张
			next.addEventListener("click",function(){
				if(isClick==true){
					
					index++
					ul.style.transform = "translate(-"+imgW*index+"px)"
					if(!ul.classList.contains("ran")){
						ul.classList.add("ran")
					}
				}
				
				isClick = false
				addColor(index)
				
			})
		
		//左	上一张
			last.addEventListener("click",function(){
				if(isClick==true){
					index--
					ul.style.transform = "translate(-"+imgW*index+"px)"
					if(!ul.classList.contains("ran")){
						ul.classList.add("ran")
					}
				}
				
				isClick = false
				addColor(index)
				
			})
			
		//边界判断
			ul.addEventListener("transitionend",function(){
				isClick = true
				if(index==ali.length+1){
					index=1;
					console.log(index)
					ul.style.transform = "translateX(-"+imgW*index+"px)"
					ul.classList.remove("ran")
				}
				if(index==0){
					index=ali.length;
					console.log(index)
					ul.style.transform = "translateX(-"+imgW*index+"px)"
					ul.classList.remove("ran")
				}
			})
		
		
		//创建分页器
			var pager = document.querySelector(".pager")
			for(var i =0;i<ali.length;i++){
				var span = document.createElement("span");
				pager.appendChild(span)
				if(i==0){
					span.classList.add("active")
				}
			}
			var allSpan = document.querySelectorAll(".pager span")
			console.log(allSpan)
			
		//分页器点击切换	
			for(var i=0;i<allSpan.length;i++){
				(function(k){
					allSpan[k].addEventListener("click",function(){
						//因为index是从1开始的   比span的下标值大1
						index=k+1
						//因为还没点击所以没触发动画效果   所以给span的点击添加动画效果
						if(!ul.classList.contains("ran")){
							ul.classList.add("ran")
						}
						ul.style.transform = "translateX(-"+imgW*index+"px)"
						for(var j =0;j<allSpan.length;j++){
							allSpan[j].classList.remove("active")
						}
						this.classList.add("active")
					})
				})(i)
			}
			
		//分页器跟随next last移动
		function addColor(k){
			k=k-1
			console.log(k)
			if(k==allSpan.length){
				k=0
			}
			if(k==-1){
				k=allSpan.length-1
			}
			for(var i=0;i<allSpan.length;i++){
				allSpan[i].classList.remove("active")
			}
			allSpan[k].classList.add("active")
			
		}
		
		//自动播放
		var time = function(){
			if(isClick==true){
				index++
				ul.style.transform = "translate(-"+imgW*index+"px)"
				if(!ul.classList.contains("ran")){
					ul.classList.add("ran")
				}
			}
			ul.addEventListener("transitionend",function(){
				if(index==ali.length+1){
					index=1;
					ul.classList.remove("ran")
					ul.style.transform = "translateX(-"+imgW*index+"px)"
				}
			})
			addColor(index)
		}
		var fun1 = setInterval(time,1000)
		
		content.addEventListener("mouseover",function(){
			clearInterval(fun1)
		})
		content.addEventListener("mouseout",function(){
			 fun1 = setInterval(time,1500)
		})
//		ul.addEventListener("mouseover",function(){
//			clearInterval(fun1)
//		})
//		ul.addEventListener("mouseout",function(){
//			 fun1 = setInterval(time,1500)
//		})

		</script>
	</body>
</html>
